// components/IndicatorSettingsModal.js

export default class IndicatorSettingsModal {
  constructor(options = {}, textRenderer, screenAdapter, resourceManager) {
    // 弹窗尺寸和位置
    this.width = options.width || 1002;
    this.height = options.height || 560;
    this.x = (options.canvasWidth || this.width) / 2 - this.width / 2;
    this.y = (options.canvasHeight || this.height) / 2 - this.height / 2;

    // 【新增】点击事件回调
    this.onBtnClick = options.onBtnClick || null;
    this.onClose = options.onClose || null;

    // 样式配置
    this.bgColor = '#FFFFFF';
    this.overlayColor = 'rgba(0, 0, 0, 0.6)';
    this.title = '指标设置';
    this.titleColor = '#333333';

    // 选项框配置
    this.boxes = [
      { text: 'MA5', selected: false },
      { text: 'MA10', selected: false },
      { text: 'MA20', selected: false },
      { text: 'MA30', selected: false },
      { text: 'MA60', selected: false },
      { text: 'MA90', selected: false },
      { text: 'MA250', selected: false },
    ];
    this.boxConfig = {
      width: 160,
      height: 60,
      borderRadius: 8,
      margin: 40, // 【已修改】上下左右边距为 40
      columns: 3, // 每行3个
      // 【修改】未选中时的背景色和文字色
      defaultBgColor: '#282D58',
      defaultTextColor: '#FFFFFF',
      // 【修改】选中时的背景色和文字色
      selectedBgColor: '#F1A039',
      selectedTextColor: '#FFFFFF',
    };

    // 确定按钮配置
    this.buttonConfig = {
      width: 239,
      height: 88,
      bgColor: '#F1A039',
      textColor: '#FFFFFF',
      borderRadius: 8,
    };

    this.screenAdapter = screenAdapter
    this.textRenderer = textRenderer
    this.resourceManager = resourceManager

    // 交互状态
    this.isVisible = false;
  }

  /**
   * 显示弹窗
   * @param {string[]} initiallySelected - 初始选中的指标数组，例如 ['MA5', 'MA20']
   */
  show(initiallySelected = []) {
    this.isVisible = true;

    // 【核心修改】根据传入的数组设置初始选中状态
    // 遍历每一个选项框
    this.boxes.forEach(box => {
      // 检查当前选项框的 text 是否存在于传入的数组中
      // 使用 includes() 方法来判断，如果存在则返回 true，否则返回 false
      box.selected = initiallySelected.includes(box.text);
    });
  }

  /**
   * 隐藏弹窗
   */
  hide() {
    this.isVisible = false
    this.onClose()
  }

  /**
   * 绘制弹窗
   * @param {CanvasRenderingContext2D} ctx 
   */
  draw(ctx) {
    if (!this.isVisible) return;

    // 1. 绘制遮罩层
    ctx.fillStyle = this.overlayColor;
    ctx.fillRect(0, 0, this.screenAdapter.DESIGN_WIDTH, this.screenAdapter.DESIGN_HEIGHT);

    // 2. 绘制弹窗背景
    const backgroundImg = this.resourceManager.getImage('gamePop');
    ctx.drawImage(backgroundImg, this.x, this.y, this.width, this.height);

    // 3. 绘制标题
    this.textRenderer.drawText(this.title, this.screenAdapter.DESIGN_WIDTH / 2, 116, `32px ${this.textRenderer.systemFont}`, "#fff", 'center', 'top')

    // 4. 绘制选项框
    const { columns, margin, borderRadius, defaultBgColor, defaultTextColor, selectedBgColor, selectedTextColor } = this.boxConfig;

    // 【已修改】选项框起始Y坐标为固定值 230
    const startY = 230;

    // 计算居中的起始X坐标
    const totalBoxesWidth = columns * this.boxConfig.width + (columns - 1) * margin;
    const startX = this.x + (this.width - totalBoxesWidth) / 2;

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '26px sans-serif';

    this.boxes.forEach((box, index) => {
      const col = index % columns;
      const row = Math.floor(index / columns);
      const boxX = startX + col * (this.boxConfig.width + margin);
      // 【已修改】使用固定的 startY 计算每一行的 Y 坐标
      const boxY = startY + row * (this.boxConfig.height + margin);

      // 【核心修复】根据选中状态绘制不同样式
      if (box.selected) {
        // 选中状态：橙色背景，无边框
        ctx.fillStyle = selectedBgColor;
        this._drawRoundRect(ctx, boxX, boxY, this.boxConfig.width, this.boxConfig.height, borderRadius);
        ctx.fill();
        ctx.fillStyle = selectedTextColor; // 白色文字
      } else {
        // 未选中状态：深蓝色背景，深蓝色边框
        ctx.fillStyle = defaultBgColor;
        ctx.strokeStyle = defaultTextColor; // 边框色与背景色相同
        ctx.lineWidth = 2; // 设置边框宽度

        this._drawRoundRect(ctx, boxX, boxY, this.boxConfig.width, this.boxConfig.height, borderRadius);
        ctx.fill(); // 填充背景
        ctx.stroke(); // 描边

        ctx.fillStyle = defaultTextColor; // 白色文字
      }

      // 绘制文字
      ctx.fillText(box.text, boxX + this.boxConfig.width / 2, boxY + this.boxConfig.height / 2);
    });

    // 5. 绘制确定按钮
    const btn = this.resourceManager.getImage('sellIcon');
    ctx.drawImage(btn, this.screenAdapter.DESIGN_WIDTH / 2 - 120, 542, 239, 88);
    this.textRenderer.drawText('确定', this.screenAdapter.DESIGN_WIDTH / 2, 575, `32px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')
  }

  /**
   * 私有方法：绘制圆角矩形
   */
  _drawRoundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0);
    ctx.lineTo(x + width, y + height - radius);
    ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
    ctx.lineTo(x + radius, y + height);
    ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
    ctx.lineTo(x, y + radius);
    ctx.arc(x + radius, y + radius, radius, Math.PI, -Math.PI / 2);
    ctx.closePath();
  }

  /**
 * 处理点击事件
 * @param {number} clickX - 点击的X坐标
 * @param {number} clickY - 点击的Y坐标
 */
  handleTouch(clickX, clickY) {
    if (!this.isVisible) return;

    // 1. 检查是否点击了确定按钮
    // 【已修改】按钮Y坐标为固定值 540
    const buttonY = 540;
    const buttonX = this.x + (this.width - this.buttonConfig.width) / 2;

    // 检查是否点击了弹窗关闭按钮
    if (clickX >= 1246 && clickX <= 1286 && clickY >= 110 && clickY <= 150) {
      this.hide()
      return
    }

    if (
      clickX >= buttonX && clickX <= buttonX + this.buttonConfig.width &&
      clickY >= buttonY && clickY <= buttonY + this.buttonConfig.height
    ) {
      // 收集所有选中的指标
      const selectedIndicators = this.boxes
        .filter(box => box.selected)
        .map(box => box.text);
      this.onBtnClick(selectedIndicators)

      this.hide(); // 点击确定后隐藏弹窗
      return;
    }

    // 2. 检查是否点击了选项框
    const { columns, margin } = this.boxConfig;

    // 【已修改】选项框起始Y坐标为固定值 230
    const startY = 230;

    // 计算居中的起始X坐标
    const totalBoxesWidth = columns * this.boxConfig.width + (columns - 1) * margin;
    const startX = this.x + (this.width - totalBoxesWidth) / 2;

    this.boxes.forEach((box, index) => {
      const col = index % columns;
      const row = Math.floor(index / columns);
      const boxX = startX + col * (this.boxConfig.width + margin);
      // 【已修改】使用固定的 startY 计算每一行的 Y 坐标
      const boxY = startY + row * (this.boxConfig.height + margin);

      if (
        clickX >= boxX && clickX <= boxX + this.boxConfig.width &&
        clickY >= boxY && clickY <= boxY + this.boxConfig.height
      ) {
        // 切换选中状态
        box.selected = !box.selected;
      }
    });
  }
}
